<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="wrap">
      <form action="http://localhost:5000/registe" method="post">
        <h1>注册页面</h1>
        用户名: <input type="text" name="username" /> <br />
        密码: <input type="password" name="password" /> <br />
        确认密码: <input type="password" name="repassword" /> <br />
        <button id="btn">注册</button>
      </form>
    </div>
    <script>
      // 表单校验
      // 需求: 用户名和密码必须写,确认密码和密码的值必须一致.如果通过校验就发送请求,如果不通过校验就不发送请求

      const btn = document.getElementById('btn')
      const username = document.querySelector('[name=username]')
      const password = document.querySelector('[name=password]')
      const repassword = document.querySelector('[name=repassword]')

      btn.onclick = function (e) {
        if (
          !(
            username.value &&
            password.value &&
            password.value === repassword.value
          )
        ) {
          e.preventDefault() //阻止默认行为
          alert('请正确输入')
        }
      }
    </script>
  </body>
</html>
